<template>
  <v-chart class="chart" :style="myStyle" :option="options"></v-chart>
</template>

<script>
import 'echarts-liquidfill'

export default {
  name: 'liquidFillView',
  data () {
    return {}
  },
  props: {
    num: {
      type: Number,
      default: 0
    },
    myStyle: {
      type: Object
    }
  },
  computed: {
    options () {
      return {
        series: [{
          radius: '80%',
          label: {
            fontSize: 24
          },
          backgroundStyle: {},
          type: 'liquidFill',
          data: [this.num, (this.num * 0.8).toFixed(2), (this.num * 0.6).toFixed(2), (this.num * 0.4).toFixed(2)],
          outline: {
            show: false
          }
        }]
      }
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>

.chart {
  width: 120px;
  height: 120px;
}
</style>
